<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle
        :radius="radius"
        :center="companyPosition"
        stroke-color="#8896FF"
        fill-color="#8896FF"
        stroke-weight="1"
        :fill-opacity="0.1">
      </el-amap-circle>
      <el-amap-marker vid="company-marker1" :position="companyPosition"></el-amap-marker>
      <el-amap-marker vid="company-marker2" :position="companyTextPosition" :content-render="companyRender"></el-amap-marker>
      <el-amap-marker v-if="!inCircle" vid="own-marker" :position="ownPosition" :content-render="tipRender"></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
  import { COMPANY_LNG, COMPANY_LAT } from '@/util/constants';
  import { geoDistance } from '@/util/util'

  export default {
    name: "Gaode",
    props:{
      radius:{
        type:Number,
        default:200,
        required:false,
        address:''
      }
    },
    data () {
      let self = this;
      return {
        zoom: 15,
        center: [COMPANY_LNG, COMPANY_LAT],
        companyPosition:[COMPANY_LNG, COMPANY_LAT],

        distance:1000,
        loaded: false,
        lng:'',
        lat:'',
        plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              console.log('定位开始>>>>>')
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.address = result.formattedAddress
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;

                  console.log('当前位置,经度',result.position.lng);
                  console.log('当前位置,纬度',result.position.lat);
                 // self.center = [self.lng, self.lat];
                 // self.loaded = true;
                  //self.$nextTick();
                  self.distance = geoDistance(COMPANY_LNG, COMPANY_LAT, self.lng, self.lat )

                }
              });
            }
          }
        }]

      }
    },
    computed:{
      companyTextPosition(){
        let lng = Number(COMPANY_LNG) - 0.0013;
        let lat = Number(COMPANY_LAT) - 0.0011;
        return [lng, lat];
      },
      inCircle(){
        return this.distance <= this.radius
      },
      ownPosition(){
        let lng = Number(this.lng) - 0.0018;
        let lat = Number(this.lat) - 0.0014;
        return [lng, lat];
      },

    },

    methods:{
      companyRender(h){
        return h('div',{style:{'width':'80px','textAlign':'center','fontSize':'0.7rem','fontWeight':'700'}},'打卡地点')
      },
      allowed(){
        return this.inCircle
      },
      getMyAddress(){
        return this.address;
      },
      tipRender(h){
        return h('div',
          {
            style:{
              'width':'120px',
              'backgroundColor':'#fff',
              'borderRadius':'25px',
              'textAlign':'center',
              'fontSize':'1rem',
              'color':'red',
              'height':'1.5rem',
              'lineHeight':'1.5rem',
              'boxShadow':'0 0 20px 0 #eee'
            }
          },'不在打卡范围内');
      }

    }
  };
</script>

<style>
  .amap-page-container {
    height: 250px;
  }
  .amap-demo{
    height: 250px;
  }
</style>